<template>
  <div class="table-classic-wrapper">
    <el-card>

      <!--搜索栏 -->
      <el-row style="margin-bottom: 10px;">
        <el-col :span="24">

          <el-form
              :inline="true"
              label-width="90px"
              class="search-form">

            <el-form-item>
              <el-input placeholder="输入美食名称进行搜索" v-model="searchForm.text" style="width: 240px;">
                <i slot="suffix" class="el-input__icon el-icon-search" @click="getCommodityCommentsByText"></i>
              </el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="danger" @click="getCommodityComments">全部美食</el-button>
            </el-form-item>

          </el-form>
        </el-col>
      </el-row>

      <!--商品评论-->
      <el-card class="card_show" shadow="never" body-style="padding:5px">
        <div>
          <el-row>

            <div v-for="i in commodityComments" :key="i.text">
              <el-col :span="5">

                <!--骨框架-->
                <div style="width: 200px">
                  <el-skeleton style="width: 200px" :loading="loading" animated>

                    <template slot="template">
                      <el-skeleton-item
                          variant="image"
                          style="width: 160px; height: 160px;"
                      />

                      <div style="padding: 10px;">
                        <el-skeleton-item variant="h3" style="width: 50%;"/>
                        <div style="display: flex; align-items: center; margin-top: 16px; height: 16px;">
                          <el-skeleton-item variant="text" style="margin-right: 16px;"/>
                        </div>
                      </div>
                    </template>

                    <!--美食信息展示-->
                    <template>
                      <el-card class="card_commodity" shadow="hover" body-style="padding:10px">

                        <el-image
                            :src="handlerImg(i.picture)"
                            class="image"
                            style="width: 100%; height: 150px;"
                        />

                        <div style="margin-top:0;">
                          <span>{{ i.text }}</span><br>
                          <el-divider></el-divider>
                          <el-button type="text" style="font-size: 20px;margin-left: 45px;"
                                     @click="goToCommentList(i.id, i.text)">
                            美食评论
                          </el-button>
                        </div>

                      </el-card>
                    </template>
                  </el-skeleton>

                </div>
              </el-col>
            </div>
          </el-row>
        </div>
      </el-card>

      <!--分页-->
      <Pagination :total="total" :page="currentPage" :limit="pageSize" @pagination="handlePageChange"></Pagination>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/component/pagination/Pagination";
import {getUserInformation} from "@/api/user";
import {getGeneralUserById} from "@/api/general/userGeneral";
import {
  selectCommodityByCurrentMerchantAndAuditState,
  selectCommodityByCurrentMerchantAndText
} from "@/api/merchant/commodity/comment";

export default {

  name: "ProductComments",

  components: {
    Pagination
  },

  data() {
    return {
      total: 0,//美食总数
      currentPage: 0,//当前页码
      pageSize: 12,//每页显示条数

      originalTotal: 0,//起始的美食总数

      /**
       * 美食列表
       */
      commodityComments: [],

      /**
       * 骨框架加载
       */
      loading: false,

      /**
       * 搜索内容
       */
      searchForm: {
        text: '',//美食名称
      },

      /**
       * 用户信息
       */
      user: undefined,
    }
  },

  created() {
    this.getGeneralUserById()
  },

  methods: {
    /**
     * 获得用户信息
     */
    getGeneralUserById() {
      const user = eval('(' + getUserInformation() + ')');

      const formData = new FormData();

      formData.append("id", user.id);


      getGeneralUserById(formData).then(res => {
        this.user = res.user;

        this.getCommodityComments();
      }).catch(() => {
        this.$message.error("用户信息获取失败");
      })
    },

    /**
     *  获得全部美食
     */
    getCommodityComments() {
      const formData = new FormData();

      formData.append("merchantId", this.user.id);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      selectCommodityByCurrentMerchantAndAuditState(formData).then(res => {
        this.commodityComments = res.commodities;
        this.total = res.total;

        this.originalTotal = this.total;
      })
    },

    /**
     * 根据美食名称查询当前餐厅的所有已发布的美食信息
     */
    getCommodityCommentsByText() {
      const formData = new FormData();

      formData.append("merchantId", this.user.id);
      formData.append("text", this.searchForm.text);
      formData.append("currentPage", this.currentPage);
      formData.append("pageSize", this.pageSize);

      if (this.searchForm.text === '') {
        this.$message.warning("请输入美食名称");

        this.commodityComments = [];
        this.total = 0;
      } else {
        selectCommodityByCurrentMerchantAndText(formData).then(res => {
          this.commodityComments = res.commodities;
          this.total = res.total;

          this.searchForm.text = "";
        })
      }
    },

    /**
     * 跳转至该商品评论列表
     * commodityId：传递当前美食id
     * commodityName：传递当前美食名称
     */
    goToCommentList(commodityId, commodityName) {
      this.$router.push({
        name:"commodityCommentsList",
        params:{
          commodityId:commodityId,
          commodityName:commodityName
        }
      })
    },

    /**
     * 处理分页
     */
    handlePageChange(val) {
      this.currentPage = val.page;
      if (this.originalTotal === this.total) {
        this.getCommodityComments();
      } else {
        this.getCommodityCommentsByText();
      }

    },

    /**
     * 展示图片
     */
    handlerImg(picture){
      console.log("data:image/jpeg;base64," + picture)
      return "data:image/jpeg;base64," + picture
    },
  }

}
</script>

<style scoped>
.card_show {
  height: 70vh;
}

.card_commodity {
  width: 200px;
  height: 270px;
  margin-left: 30px;
  margin-top: 30px;
}

.el-divider--horizontal {
  margin: 5px 5px;
}
</style>
